<template>
	<view>
		<u-navbar :placeholder='placeholder' :bgColor="'rgba(3, 132, 252,'+opc+')'" leftIconColor="#fff">
			<view class="u-nav-slot" slot="left" @click="clickback">
				<u-icon v-if="isback" name="arrow-left" size="32rpx" color="#fff"></u-icon>
				{{title}}
			</view>
			<view class="u-nav-slot" slot='right'>
				<u-icon :name="righticon" @click="clickright" size="73rpx"></u-icon>
				<!-- 需要胶囊位置 -->
				<view class="menuButtonInfo" :style="{width:menuButtonInfoStyle.width,height:menuButtonInfoStyle.height}">

				</view>
			</view>
		</u-navbar>
	</view>
</template>

<script>
	export default {
		name: "navbar",
		props: {
			isback: {
				type: Boolean,
				default: true
			},
			title: {
				type: String,
				default: ''
			},
			opc: {
				type: Number,
				default: 1
			},
			placeholder: {
				type: Boolean,
				default: true
			},
			righticon:{
				type:String,
				default:''
			}
		},
		data() {
			return {
				menuButtonInfoStyle: {
					width:0,
					heigth:0
				},
				prevPage:null
			};
		},
		mounted() {
			// #ifdef MP
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.menuButtonInfoStyle = {
				width: menuButtonInfo.width+'px',
				height: menuButtonInfo.height+'px'
			}
			// #endif
			// console.log()
		},
		methods:{
			clickback(){
				if(!this.isback){
					return
				}
				if(this.prevPage){
					this.back()
				}else{
					uni.switchTab({
						url:'/pages/tabbar/home'
					})
				}
				
			},
			clickright(){
				this.$emit('clickright')
			}
		},
		created() {
			let pages = getCurrentPages() // 获取栈实例
			let page = pages[pages.length - 1] // 获取当前页面的数据，包含页面路由
			this.prevPage = pages[pages.length - 2] // 获取上个页面的数据，包含页面
			// console.log(this.prevPage)
		}
	}
</script>

<style lang="scss">
	.u-nav-slot {
		font-family: YouYuan;
		font-weight: 400;
		font-size: 34rpx;
		color: #FFFFFF;
		line-height: 34rpx;
		display: flex;
		align-items: center;
	}
</style>